<script setup lang="ts">
import Upload from './components/Upload.vue'
import UploadItem from './components/UploadItem.vue'
import Car from '@/assets/images/car.jpg'
import { ref } from 'vue'

const uploadRef = ref<InstanceType<typeof Upload> | null>(null)

const uploadItemRef = ref<InstanceType<typeof UploadItem> | null>(null)
const fileList = ref<any[]>([
  {
    name: '文件1',
    url: Car,
  },
  {
    name: '文件2',
    url: Car,
  },
  {
    name: '文件3',
    url: Car,
  },
])

const handleViewFiles = () => {
  console.log('文件列表', uploadItemRef?.value?.newFileList)
}
</script>
<template>
  <div class="container">
    <Upload
      ref="uploadRef"
      :file-size="20"
      :limit="10"
      :file-list="uploadItemRef?.newFileList"
      file-type="zip,png,jpg,jpeg,doc,docx,xls,xlsx,pdf,ppt,pptx"
      direction="horizontal"
    >
      <UploadItem
        ref="uploadItemRef"
        :file-list="fileList"
        :upload-list="uploadRef?.uploadList"
      />
    </Upload>
  </div>
  <el-button type="primary" @click="handleViewFiles" style="width: 200px">
    控制台输出文件列表
  </el-button>
</template>

<style lang="scss" scoped>
.container {
  padding: 20px;
  border-radius: 10px;
}
</style>
